import React, { useEffect, useState } from "react";
import { Col, Row, Tooltip, Divider, Table, Spin, Card } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import Router, { withRouter } from '@/router/renderRouter';
import MemberDataCharts from './memberDataCharts';
import TransDataCharts from './transDataCharts';
import "./index.scss";
import { 
  queryHistory,
  homeIndex,
} from '@/api/api'

const Home = (props) => {
  const [loading, setLoading] = useState(false)
  const [loading2, setLoading2] = useState(false)
  const [dataSource, setDataSource] = useState([]);
  const [homeData, setHomeData] = useState([]);
  
  // 获取登录日志
  const getHistoryList = async () => {
    try {
      setLoading(true)
      let res = await queryHistory()
      if(res.code === 0) {
        setDataSource(res.data)
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  }
  
  // 获取统计数据
  const getHomeData = async () => {
    try {
      setLoading2(true)
      let res = await homeIndex()
      if(res.code === 0) {
        res.data.platformFreezeAmount2 = (res.data.platformFreezeAmount/res.data.usdtRate).toFixed(2)
        res.data.platformNotSaleAmount2 = (res.data.platformNotSaleAmount/res.data.usdtRate).toFixed(2)
        res.data.platformTotalAmount2 = (res.data.platformTotalAmount/res.data.usdtRate).toFixed(2)
        setHomeData(res.data)
      }
      setLoading2(false)
    } catch (error) {
      console.log(error)
    }
  }
  
  // 首次更新
  useEffect(() => {
    getHistoryList()
    getHomeData()
    return () => { 
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])
  
  
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      render: (text: any, item: any, index: number) => <>{index + 1}</>,
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
      align: 'center',
      render: (text: any) => <>{text || text ? text : '--'}</>,
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      key: 'ip',
      align: 'center',
      render: (text: any) => <>{text || text ? text : '--'}</>,
    },
    {
      title: '登录时间',
      dataIndex: 'createdTime',
      key: 'createdTime',
      align: 'center',
      render: (text: any) => <>{text || text ? text : '--'}</>,
    },
    {
      title: 'IP归属',
      dataIndex: 'location',
      key: 'location',
      align: 'center',
      render: (text: any) => <>{text || text ? text : '--'}</>,
    },
    {
      title: '运营商',
      dataIndex: 'operators',
      key: 'operators',
      align: 'center',
      render: (text: any) => <>{text || text ? text : '--'}</>,
    },
    {
      title: '登录设备',
      dataIndex: 'device',
      key: 'device',
      align: 'center',
      render: (text: any) => <>{text || text ? text : '--'}</>,
    },
  ];
  
  return (
    <>
      <Card>
        <Spin spinning={loading2}>
          <Row align="center" justify="space-between">
            <Col className="col col1" span={5} justify="center">
              <div className="col-name">平台总余额</div>
              <div className="col-line">
                <span className="col-line-left">USDT</span>
                <span className="col-line-right">{homeData.platformTotalAmount2 || '--'}</span>
              </div>
              <div className="col-line">
                <span className="col-line-left">￥</span>
                <span className="col-line-right">{homeData.platformTotalAmount || '--'}/B</span>
              </div>
              <Tooltip placement="topLeft" title={`当前汇率：1USDT=${homeData.usdtRate}RMB`}>
                <QuestionCircleOutlined style={{fontSize: '20px'}} className="col-info" />
              </Tooltip>
            </Col>
            <Col className="col col2" span={5}>
              <div className="col-name">平台不可售余额</div>
              <div className="col-line">
                <span className="col-line-left">USDT</span>
                <span className="col-line-right">{homeData.platformNotSaleAmount2 || '--'}</span>
              </div>
              <div className="col-line">
                <span className="col-line-left">￥</span>
                <span className="col-line-right">{homeData.platformNotSaleAmount || '--'}/B</span>
              </div>
              <Tooltip placement="topLeft" title={'不可售余额为不可卖金额'}>
                <QuestionCircleOutlined  style={{fontSize: '20px'}} className="col-info" />
              </Tooltip>
            </Col>
            <Col className="col col3" span={5}>
              <div className="col-name">平台锁定余额</div>
              <div className="col-line">
                <span className="col-line-left">USDT</span>
                <span className="col-line-right">{homeData.platformFreezeAmount2||'--'}</span>
              </div>
              <div className="col-line">
                <span className="col-line-left">￥</span>
                <span className="col-line-right">{homeData.platformFreezeAmount || '--'}/B</span>
              </div>
              <Tooltip placement="topLeft" title={'平台锁定余额为正在交易中金额'}>
                <QuestionCircleOutlined  style={{fontSize: '20px'}} className="col-info" />
              </Tooltip>
            </Col>
            <Col className="col col4" span={5}>
              <div className="col-name">平台总注册数</div>
              <div className="col-line">
                <span className="col-line-left" style={{width: '45%'}}>商户注册数: </span>
                <span className="col-line-right" style={{width: '45%'}}>{homeData.platformTotalMerchantRegister || homeData.platformTotalMerchantRegister===0 ? homeData.platformTotalMerchantRegister : '--'}/人</span>
              </div>
              <div className="col-line">
                <span className="col-line-left" style={{width: '45%'}}>会员注册数</span>
                <span className="col-line-right" style={{width: '45%'}}>{homeData.platformTotalMemberRegister || homeData.platformTotalMemberRegister===0 ? homeData.platformTotalMemberRegister : '--'}/人</span>
              </div>
            </Col>
          </Row>
        </Spin>
    
        <div className="charts-model">
          <div className="charts">
            <MemberDataCharts />
          </div>
          <div className="charts">
            <TransDataCharts />
          </div>
        </div>
        
        <Divider orientation="left">最近5条登录信息</Divider>
        <div className="table">
          <Table
            loading={loading}
            bordered
            dataSource={dataSource}
            columns={columns}
            pagination={false}
          />
        </div>
      </Card>
    </>
  )
}
export default withRouter(Home)